<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0;
      /*核心代码  左右空间 + 左盒子宽，因为左盒子在定位前，要能在父元素中一行显示，父元素中宽度要为左盒子宽*/
      min-width: 650px;
    }
    /* 清除浮动 */
    .clearfix::after {
      display: block;
      content: "";
      clear: both;
    }
    .fl {
      float: left;
    }
    .header {
      height: 100px;
      background-color: tomato;
    }

    .container {
      padding-left: 200px;
      padding-right: 250px;
    }
    .container .center {
      width: 100%;
      height: 300px;
      background-color: skyblue;
    }
    .container .left {
      width: 200px;
      height: 300px;
      background-color: cadetblue;
      /*核心代码*/
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .container .right {
      width: 250px;
      height: 300px;
      background-color: aquamarine;
      /*核心代码*/
      margin-right: -250px;
    }
    .footer {
      height: 100px;
      background-color: #000;
    }
  </style>
  <body>
    <div class="header">头部</div>
    <div class="container clearfix">
      <div class="center fl">中间</div>
      <div class="left fl">左边</div>
      <div class="right fl">右边</div>
    </div>
    <div class="footer">底部</div>
  </body>
</html>
